<template>
  <el-main>
    <div class="contactContainer">
      <div class="contactContent">
        <h2>联系我们</h2>
        <div class="line"></div>
        <h3>联系方式</h3>
        <p class="thisP placeD">联系电话：0571-88582234</p>
        <p class="thisP placeL">邮箱地址：fd-dedi@navrise.com</p>
        <h3>办公地点</h3>
        <p class="thisP placeP">以下是旭航集团的主要办公地点</p>
        <div class="places">
          <div
            v-for="(item,index) in placeData"
            class="thisPlace"
            :class="index === 0?place1:index === 1?place2:index === 2?place3:index === 3?
          place4:index === 4?place5:index === 5?place6:''"
          >
            <div class="placeInformation">
              <h4>{{item.place}}</h4>
              <p>{{item.name}}</p>
              <ul class="placeUl">
                <li>{{item.address}}</li>
                <li>{{item.zipCode}}</li>
              </ul>
            </div>
          </div>
        </div>
        <h3 class="scienceH3">办公环境</h3>
        <p class="thisP scienceP">以下是旭航集团在杭州的办公环境</p>
        <div class="sciences">
          <div v-for="item in imgScienceData">
            <el-image
              :src="item"
              fit="cover"
            ></el-image>
          </div>
        </div>
        <h3 class="activeH3">团建集锦</h3>
        <p class="thisP activeP">以下是旭航集团组织的团建留影</p>
        <div class="actives">
          <div v-for="item in imgActiveData">
            <el-image
              :src="item"
              fit="cover"
            ></el-image>
          </div>
        </div>
      </div>
    </div>
    <foot-view></foot-view>
  </el-main>
</template>

<script>
  import scienceUrl1 from '@/assets/img/contactUs/science1.png'
  import scienceUrl2 from '@/assets/img/contactUs/science2.png'
  import scienceUrl3 from '@/assets/img/contactUs/science3.png'
  import scienceUrl4 from '@/assets/img/contactUs/science4.png'
  import scienceUrl5 from '@/assets/img/contactUs/science5.png'
  import scienceUrl6 from '@/assets/img/contactUs/science6.png'
  import activeUrl1 from '@/assets/img/contactUs/active1.png'
  import activeUrl2 from '@/assets/img/contactUs/active2.png'
  import activeUrl3 from '@/assets/img/contactUs/active3.png'
  import activeUrl4 from '@/assets/img/contactUs/active4.png'
  import activeUrl5 from '@/assets/img/contactUs/active5.png'
  import activeUrl6 from '@/assets/img/contactUs/active6.png'
  export default {
    name: "ContactUs",
    data(){
      return{
        imgScienceData:[scienceUrl1,scienceUrl2,scienceUrl3,scienceUrl4,scienceUrl5,scienceUrl6],
        imgActiveData:[activeUrl1,activeUrl2,activeUrl3,activeUrl4,activeUrl5,activeUrl6],
        place1:'placeOne',
        place2:'placeTwo',
        place3:'placeThree',
        place4:'placeFour',
        place5:'placeFifth',
        place6:'placeSix',
        placeData:[
          {
            place:'杭州',
            name:'杭州旭航网络科技有限公司',
            address:'地址：杭州市滨江区阿里中心4号楼10楼',
            zipCode:'邮编：310000'
          },
          {
            place:'北京',
            name:'北京大知科技有限公司',
            address:'地址：北京市朝阳区惠河南街1102号国粹苑C座',
            zipCode:'邮编：100000'
          },
          {
            place:'上海',
            name:'上海派群信息技术有限公司',
            address:'地址：上海闵行区红松路101号金汇四季广场',
            zipCode:'邮编：201103'
          },
          {
            place:'广州',
            name:'广州响乐互游网络科技有限公司',
            address:'地址：广州市海珠区江南大道中232号B座华海大厦第六层',
            zipCode:'邮编：510288'
          },
          {
            place:'深圳',
            name:'深圳大知文化传播有限公司',
            // address:'地址：深圳市福田区沙头街道天安社区深南大道6029号江西大厦',
            address:'地址：深圳市福田区天安社区深南大道6029号江西大厦',
            zipCode:'邮编：450000'
          },
          {
            place:'香港',
            name:'香港乐汇科技有限公司',
            // address:'地址：香港九龙宝安大厦A座11F',
            address:'地址：中国·香港',
            zipCode:'邮编：999077'
          },
        ]
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-main {
    width: 100%;
    background-color: #f4f4f4;
    padding: 0;
    min-width: 120rem;
    .contactContainer {
      width: 100rem;
      background-color: #ffffff;
      margin: 2rem auto 0;
      .contactContent{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 7.33rem 6.66rem 3.67rem;
        box-sizing: border-box;
        h2,h3,p{
          margin: 0;
        }
        h2{
          /*font-family: 'fontMedium';*/
          font-size: 3rem;
          font-weight: 500;
          letter-spacing: 1px;
          color: #333333;
        }
        .line{
          width: 1.66rem;
          height: 1px;
          background-color: #999999;
          margin: 2.33rem 0 5.833rem;
        }
        h3{
          /*font-family: 'fontMedium';*/
          font-size: 1.5rem;
          font-weight: 500;
          letter-spacing: 1px;
          color: #333333;
        }
        .thisP{
          font-size: 1.33rem;
          font-weight: 300;
          color: #777777;
        }
        .placeD{
          margin: 1.833rem 0 1.2rem;
        }
        .placeL{
          margin-bottom: 5.833rem;
        }
        .placeP{
          margin: 1rem 0 2.8rem;
        }
        .places{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          flex-wrap: wrap;
          .thisPlace{
            width: 27.5rem;
            height: 33.33rem;
            display: flex;
            align-items: flex-end;
            .placeInformation{
              width: 100%;
              height: 14rem;
              padding: 1.6rem 0 2.4rem 1.08rem;
              display: flex;
              flex-direction: column;
              justify-content: flex-start;
              align-items: flex-start;
              box-sizing: border-box;
              h4{
                font-size: 2rem;
                font-weight: 400;
                letter-spacing: 1px;
                color: #ffffff;
                margin: 0;
              }
              p{
                font-size: 1.33rem;
                font-weight: 300;
                color: #ffffff;
                margin: .6rem 0 1.1rem;
              }
              .placeUl{
                width: 100%;
                padding: 0;
                margin: 0;
                list-style: none;
                li{
                  font-size: 1rem;
                  font-weight: 300;
                  line-height: 1.5rem;
                  color: #ffffff;
                  text-align: left;
                }
              }

            }
          }
          .placeOne{
            background: url('../assets/img/contactUs/place1.png');
            margin-bottom: 2.0833rem;
            .placeInformation{
              background-color: rgba(0,139,92,.8);
            }
          }
          .placeTwo{
            background: url('../assets/img/contactUs/place2.png');
            margin-bottom: 2.0833rem;
            .placeInformation{
              background-color: rgba(63,169,1,.8);
            }
          }
          .placeThree{
            background: url('../assets/img/contactUs/place3.png');
            margin-bottom: 2.0833rem;
            .placeInformation{
              background-color: rgba(209,70,0,.8);
            }
          }
          .placeFour{
            background: url('../assets/img/contactUs/place4.png');
            .placeInformation{
              background-color: rgba(209,70,0,.8);
            }
          }
          .placeFifth{
            background: url('../assets/img/contactUs/place5.png');
            .placeInformation{
              background-color: rgba(10,72,369,.8);
            }
          }
          .placeSix{
            background: url('../assets/img/contactUs/place6.png');
            .placeInformation{
              background-color: rgba(63,169,1,.8);
            }
          }
        }
        .scienceH3{
          margin: 5rem 0 1rem;
        }
        .scienceP,.activeP{
          margin-bottom: 2rem;
        }
        .sciences,.actives{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .el-image{
            width: 27.5rem;
            height: 18.5rem;
            margin-bottom: 2.33rem;
          }
        }
        .activeH3{
          margin: 2.67rem 0 1rem;
        }
      }
    }
  }
</style>
